<template>
  <q-dialog v-model="show" persistent>
    <q-card style="min-width: 400px">
      <q-card-section>
        <div class="text-h6">添加策略组</div>
      </q-card-section>
      <q-card-section>
        <q-list>
          <q-item>
            <q-item-section side class="name">企业名称</q-item-section>
            <q-item-section>{{companyName}}</q-item-section>
          </q-item>
          <q-item>
            <q-item-section side class="name">策略组</q-item-section>
            <q-item-section>
              <q-select v-model="seleGroup" :options="groups" dense outlined @input="getMenulist"></q-select>
            </q-item-section>
          </q-item>
          <q-item class="">
            <q-item-section side class="name justify-start">菜单列表</q-item-section>
            <q-item-section>
              <q-scroll-area class="showMenu q-pa-sm">
                <q-tree
                  :nodes="strategyNode"
                  node-key="id"
                  label-key="name"
                  no-nodes-label="暂无数据"
                  default-expand-all
                />
                <q-inner-loading :showing="treeLoading">
                  <q-spinner-gears size="50px" color="primary" />
                </q-inner-loading>
              </q-scroll-area>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="取消" @click="hideDialog"/>
        <q-btn flat label="确认" @click="submit" type="button"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
// import { getStrategies, getStrategyConf } from 'src/boot/user-gov/company-menu'
export default {
  name: 'strategyGroup',
  data () {
    return {
      show: false,
      seleGroup: {}, // 选中的策略组
      groups: [], // 策略组列表
      companyName: '', // 公司名称
      tab: '', // 当前终端
      treeLoading: false, // 查询企业列表的loading状态
      strategyNode: [], // 企业菜单的策略树
      strateryIds: {} // 企业菜单的策略id
    }
  },
  methods: {
    // 获取策略组
    getGroups (tab) {
      // const info = {
      //   terminalType: tab
      // }
      // getStrategies(info).then(res => {
      //   this.groups = res.list
      // })
    },
    // 获取菜单列表
    getMenulist (value) {
      // const info = {
      //   strategyId: value.value,
      //   terminalType: this.tab
      // }
      this.treeLoading = true
      // getStrategyConf(info).then(res => {
      //   console.log(res)
      //   this.strategyNode = res.tree
      //   this.strateryIds = res.ids
      // }).finally(() => {
      //   this.treeLoading = false
      // })
    },
    // 显示弹框
    showDialog (tab, companyName) {
      this.initInfo(tab, companyName)
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化弹框数据
    initInfo (tab, companyName) {
      this.tab = tab
      this.companyName = companyName
      this.seleGroup = {}
      this.strategyNode = []
      this.strateryIds = {}
      this.getGroups(tab)
    },
    // 确认提交
    submit () {
      this.$emit('submit', this.strateryIds)
    }
  }
}
</script>

<style scoped lang="stylus">
.name{
  width 80px
}
.showMenu{
  height: 260px
  border 1px solid #dcdcdc
  border-radius 4px
}
</style>
